<template>
    <div>
        <input v-model="search">

        <!-- 不使用css动画 进入之前钩子 进入钩子 离开钩子 -->
        <transition-group 
            tag="ul"
            :class="false"
            @befor-enter="beforEnter"
            @enter="enter"
            @leave="leave"
        >
            <li 
                v-for="(item, index) in showList" 
                :key="item"
                :data-index="index"
            >
                {{item}}
            </li>
        </transition-group>
    </div>
</template>
<script>
import gsap from 'gsap'
export default {
    name: '',
    data() {
       return {
           list: ["ace", "sabo", "luffy", "jams", "kobe", "curry", "yzh", "qzt", "sjb"],
           search: ""
       }
    },
    computed: {
        showList() {
            return this.list.filter(v => v.indexOf(this.search) !== -1)
        }
    },
    methods: {
        beforEnter(el) {
            // console.log(el)
            el.style.opacity = 0;
            el.style.height = 0;
        },
        enter(el, done) {
            // console.log(el, done)
            gsap.to(el, {
                opacity: 1,
                height: "1.6em",
                delay: el.dataset.index * 0.5,   //解决同步动画 根据index一个一个动画
                onComplete: done
            })
        },
        leave(el, done) {
            // console.log(el, done)
            gsap.to(el, {
                opacity: 0,
                height: 0,
                delay: el.dataset.index * 0.5,
                onComplete: done
            })
        }
    },
}
</script>
<style>
</style>
